<template>
  <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
  <view class="bind-box">
    <view class="changeInpt">
      <view class="user-name">
        11平台用户名
      </view>
      <view class="user-name-box">
        <uni-easyinput v-model="value"  placeholder="请输入需要绑定的11平台用户名" @change="inputFn"></uni-easyinput>
      </view>
    </view>
    <view class="changeInpt" style="margin-bottom:80rpx;">
      <view class="user-name">
        11平台登录密码
      </view>
      <view class="user-name-box">
        <uni-easyinput type="password" v-model="password" placeholder="请输入需要绑定的11平台登录密码"
          @change="inputFn2"></uni-easyinput>
      </view>
    </view>
    <view class="sure-bind" @click="bindWx">
      确定绑定
    </view>
    <view class="tips2">
      <image src="https://img.5211game.com/Base/xiaochengxu/static/tishi2.png" lazy-load alt=""></image>
    </view>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="绑定结果" :content="txt"
        @confirm="dialogConfirm" @close="dialogClose" @change="change"></uni-popup-dialog>
    </uni-popup>
    <!-- 提示信息弹窗 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="msgType2" :message="messageText" :duration="2000"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
  import md5 from "js-md5"
  import base64 from '@/mixins/base64.js'
  import {
    mapMutations,
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        value: '',
        password: '',
        msgType: 'warn',
        txt: '绑定成功',
        msgType2: 'error',
        messageText: '',
        show: false,
        unid: '',
        oid:'',
        signMd5: ''
      };
    },
    mixins: [base64],
    onLoad(options) {
      console.log(options)
      this.unid = options.unid;
      this.oid= options.oid;
    },
    methods: {
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateOid', 'updateUserPic','updataIsPhone','updateUid']),
      change(e) {
        this.show = e.show
      },
      dialogToggle(type) {
        this.msgType = type
        this.$refs.alertDialog.open()
      },
      dialogConfirm() {
        console.log('点击确认')
      },
      dialogClose() {
        console.log('点击关闭')
      },
      inputFn() {
        if (this.$Utils.isNull(this.value)) {
          this.messageText = '请输入需要绑定的11平台用户名 ';
          this.$refs.message.open()
        }
      },
      inputFn2() {
        if (this.$Utils.isNull(this.password)) {
          this.messageText = '请输入需要绑定的11平台登录密码';
          this.$refs.message.open()
        }
      },
      //绑定微信接口
      bindWx() {
        if (!this.$Utils.isNull(this.password) && !this.$Utils.isNull(this.value)) {
          // this.dialogToggle('warn')
          this.requseBind11();
        } else if (this.$Utils.isNull(this.value)) {
          this.messageText = '请输入需要绑定的11平台用户名 ';
          this.$refs.message.open()
        } else if (this.$Utils.isNull(this.password)) {
          this.messageText = '请输入需要绑定的11平台登录密码';
          this.$refs.message.open()
        }
      },
      requseBind11() {
        console.log(`${3}|${this.unid}`)
        const AccessToken_base = this.encode(`${3}|${this.unid}`);
        console.log('AccessToken_base', AccessToken_base)
        this.signMd5 =
          `AccessToken=${AccessToken_base}&Account=${this.value}&Bid=65&OpenId=${this.unid}&OpenType=${3}&Password=${this.password}&key=C63A39419CE64F258ADFE3FAF5E63477`;
        console.log('str', this.signMd5)
        this.signMd5 = md5(this.signMd5);
        const query = {
          Account: this.value,
          Password: this.password,
          OpenType: 3,
          OpenId: this.unid,
          AccessToken: AccessToken_base,
          Sign: this.signMd5,
          Bid: 65
        }

        console.log('this.signMd5', this.signMd5)
        uni.request({
          url: `https://passport.9211.com/WebApi/Wap/Action?t=oauthopenbind&data=${JSON.stringify(query)}&pt=ios`,
          header: {
            'Content-Type': 'application/json' //自定义请求头信息
          },
          method: 'GET', //请求方式，必须为大写
          success: (res) => {
            console.log('绑定成功', res)
            const {
              data
            } = res
            if (data.code == 0) {
              this.updateToken(data.data.st);
              this.updateUid(this.unid)
              this.updateOid(this.oid);
              const userInfo = {
                userId: data.data.userId,
                userName: data.data.userName,
                nickName: '',
                avatarUrl: '',
                isphone: false
              }
              this.updataIsPhone(false)
              this.updateUserInfo(userInfo);
              this.getUserPic(data.data.userId);
              uni.switchTab({
                url: '/pages/my/my'
              })
            } else {
              this.messageText = data.msg;
              this.$refs.message.open()
            }
          },
        })

      },
      getUserPic(uid) {
        const signMd5 = md5(
          `Bid=66&UserId=${uid}&key=7863BD2768C14099BA0AC5070B469C76`);
        uni.request({
            url: `https://api.5211game.com/YYAvatar/Wap/Action?t=queryuseravatar&data=${JSON.stringify({Bid:66,UserId:uid,Sign:signMd5})}`,
            header: {
              'Content-Type': 'application/json' //自定义请求头信息
            },
            method: 'GET',
            success: (reg) => {
              console.log('头像', reg)
              this.updateUserPic(reg.data.data.PATH);
            },
            fail: (err) => {
              this.updateUserPic(
                'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
              )
            },
          }

        )

      },
    }
  }
</script>

<style lang="scss">
  page {

    background-color: #fff;

    .bind-box {
      padding-top: 50rpx;

      .changeInpt {
        width: 690rpx;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 32rpx;

        .user-name {
          font-family: MicrosoftYaHei;
          font-size: 26rpx;
          color: #1A1A1A;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-bottom: 29rpx;
        }

        .uni-section .uni-section-header {
          padding: 0 10rpx;
        }

        .user-name-box {
          width: 690rpx;
          height: 96rpx;

          .uni-easyinput__content-input {
            width: 690rpx;
            height: 96rpx;
          }
        }
      }

      .sure-bind {
        width: 640rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        margin: 0 auto;
        background: linear-gradient(90deg, #F75803 0%, #FFA000 100%);
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        font-family: MicrosoftYaHei;
        font-size: 28rpx;
        color: #FFFFFF;
      }

      .tips2 {
        width: 707rpx;
        margin:0 auto;
        margin-top: 100rpx;
        image {
          width: 707rpx;
        }
      }
    }

  }
</style>